<template>
    <div id="app" class="parentElement">

            <div
                draggable="true"
                class="innerElement"
            >{{ text }}</div>
            <!--<el-tree :data="data" :props="defaultProps" ></el-tree>-->
    </div>
</template>

<script>
import DragItDude from "vue-drag-it-dude";

export default {
    name: "App",
    components: {
        DragItDude
    },
    data: () => ({
        text: "Just move me!",
        data: [{
            label: '一级 1',
            children: [{
                label: '二级 1-1',
                children: [{
                    label: '三级 1-1-1'
                }]
            }]
        }, {
            label: '一级 2',
            children: [{
                label: '二级 2-1',
                children: [{
                    label: '三级 2-1-1'
                }]
            }, {
                label: '二级 2-2',
                children: [{
                    label: '三级 2-2-1'
                }]
            }]
        }, {
            label: '一级 3',
            children: [{
                label: '二级 3-1',
                children: [{
                    label: '三级 3-1-1'
                }]
            }, {
                label: '二级 3-2',
                children: [{
                    label: '三级 3-2-1'
                }]
            }]
        }],
        defaultProps: {
            children: 'children',
            label: 'label'
        }
    }),
    methods: {
        handleActivated() {
            this.text = "I am ready for great things!";
        },
        handleDragging() {
            this.text = "Weeee!";
        },
        handleDropped() {
            this.text = "That's place is awesome!";
            setTimeout(() => {
                this.text = "Just move me!";
            }, 3000);
        }
    }
};
</script>

<style>
.parentElement {
    position: relative;
}
.innerElement {
    width: 300px;
    height: 300px;
    background-color: #00d1b2;
}
</style>
